<div class="page" data-department-id="{{ 'DEPARTMENT_ID' | DATA }}">
    <div class="header">
        <img class="logo" src="{{ 'COMPANY_LOGO' | DATA }}" style="display: {{ 'SHOW_COMPANY_LOGO' | DATA }};" />
        <div>
            <table>
                <tr>
                    <td colspan="2">
                        <span style="display: {{ 'SHOW_SHOP_INFO' | DATA }};">{{ 'TEL_' | TRANSLATE }}:{{ 'SHOP_TEL' | DATA }}
                        <br />{{ 'SHOP_ADDRESS' | DATA }}</span>
                        <br /><div style="font-size: 140%; display: {{ 'SHOW_INVOICE_TITLE' | DATA }};">{{ 'INVOICE_TITLE' | DATA }}</div>
                        <div style="font-size: 240%; margin: 14px;">{{ 'TICKET_TYPE' | DATA }}:{{ 'TICKET_NO' | DATA }}</div>
                        <div style="font-size: 140%">({{ 'INVOICE_TYPE' | DATA }})</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="body">
        <table class="customer-table">
            <tr style="display: {{ 'SHOW_MEMBER_CLASS' | DATA }};">
                <td>{{ 'INVOICE_CUSTOMER_LEVEL' | TRANSLATE }}</td>
                <td>{{ 'MEMBER_CLASS' | DATA }}</td>
            </tr>
            <tr>
                <td>{{ 'INVOICE_DATE' | TRANSLATE }}</td>
                <td>{{ 'INVOICE_DATE' | DATA }}</td>
                <td style="display: {{ 'SHOW_INVOICE_NO' | DATA }};">{{ 'INVOICE_NO' | TRANSLATE }}</td>
                <td style="display: {{ 'SHOW_INVOICE_NO' | DATA }};">{{ 'INVOICE_NO' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_SALESMAN' | DATA }};">
                <td>{{ 'INVOICE_SALES' | TRANSLATE }}</td>
                <td>{{ 'SALESMAN' | DATA }}</td>
            </tr>
        </table>
        <table class="product-table">
            <tr>
                <td>{{ 'INVOICE_PRODUCT_NAME' | TRANSLATE }}</td>
                <td>{{ 'QTY' | TRANSLATE }}</td>
                <td style="display: {{ 'SHOW_PRICE' | DATA }};">{{ 'INVOICE_DIS' | TRANSLATE }}</td>
                <td style="display: {{ 'SHOW_PRICE' | DATA }};">{{ 'INVOICE_AMT' | TRANSLATE }}</td>
            </tr>
            {{ 'PRODUCT_ITEM' | TEMPLATE }}
        </table>
        <p style="text-align:center; display: {{ 'SHOW_DEPARTMENT_NAME' | DATA }};">{{ 'DEPARTMENT_NAME' | DATA }}</p>
        <table class="summary-table" style="margin-bottom:0px !important; display: {{ 'SHOW_PAYMENT_DETAIL' | DATA }};">
            <tr>
                <td>{{ 'INVOICE_TOTAL' | TRANSLATE }}</td>
                <td align="right">{{ 'ITEM_TOTAL' | DATA }}</td>
            </tr>
        </table>
        <table class="summary-table" style="margin-bottom:0px !important; display: {{ 'SHOW_PAYMENT_DETAIL' | DATA }};">
            {{ 'CHARGE_ITEM' | TEMPLATE }}
        </table>
        <table class="summary-table" style="display: {{ 'SHOW_PAYMENT_DETAIL' | DATA }};">
            <tr>
                <td style="font-size: 140%">{{ 'INVOICE_BALANCE_DUE' | TRANSLATE }}</td>
                <td align="right" style="font-size: 140%">{{ 'GRAND_TOTAL' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_RECEIVE_DETAIL' | DATA }};">
                <td>{{ 'RECEIVED' | TRANSLATE }}</td>
                <td align="right">{{ 'CASH_RECEIVED' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_RECEIVE_DETAIL' | DATA }};">
                <td>{{ 'CHANGES_' | TRANSLATE }}</td>
                <td align="right">{{ 'CHANGES' | DATA }}</td>
            </tr>
            <tr>
                <td>{{ 'PAYMENT_BY' | TRANSLATE }}</td>
                <td>{{ 'PAYMENT_METHOD' | DATA }}</td>
            </tr>
            <tr>
                <td>{{ 'INVOICE_REMARKS' | TRANSLATE }}</td>
                <td>{{ 'REMARKS' | DATA }}</td>
            </tr>
            <tr style="border-top:1px black solid; display: {{ 'SHOW_OCTOPUS' | DATA }};">
                <td colspan="2">{{ 'PAY_BY_OCTOPUS' | TRANSLATE }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_OCTOPUS' | DATA }};">
                <td>{{ 'DEVICE_NO' | TRANSLATE }}</td>
                <td>{{ 'DEVICE_NO' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_OCTOPUS' | DATA }};">
                <td>{{ 'OCTOPUS_NO' | TRANSLATE }}</td>
                <td>{{ 'OCTOPUS_NO' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_OCTOPUS' | DATA }};">
                <td>{{ 'AMOUNT_DEDUCTED' | TRANSLATE }}</td>
                <td>{{ 'AMOUNT_DEDUCTED' | DATA }}</td>
            </tr>
            <tr style="display: {{ 'SHOW_OCTOPUS' | DATA }};">
                <td>{{ 'REMAINING_VALUE' | TRANSLATE }}</td>
                <td>{{ 'REMAINING_VALUE' | DATA }}</td>
            </tr>
        </table>
        <div style="display: {{ 'SHOW_OCTOPUS' | DATA }};">
            <span style="font-size:20px;">{{ 'LAST_ADD_BY_TITLE' | TRANSLATE }} {{ 'DEDUCT_DATE' | DATA }} {{ 'LAST_ADD_BY_ENDING' | TRANSLATE }}</span>
        </div>
    </div>
    <div class="footer" style="bottom:10px !important;display: {{ 'SHOW_FOOTER' | DATA }};">
        <table>
            <tr>
                <td align="center">
                    <div class="qr-code">
                        <img src="" />
                    </div>
                    <div class="qr-desc">
                        Powered by
                        <img src="" />
                        www.posify.me
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
